<template>
  <view :data-theme="theme">
    <view class='bill-details'>
      <view class='nav acea-row'>
        <view class='item' :class='type==="all" ? "on":""' @click='changeType("all")'>全部</view>
        <view class='item' :class='type==="expenditure" ? "on":""' @click='changeType("expenditure")'>支出</view>
        <view class='item' :class='type==="recharge" ? "on":""' @click='changeType("recharge")'>充值</view>
        <view class='item' :class='type==="income" ? "on":""' @click='changeType("income")'>收入</view>
      </view>
      <view class='sign-record'>
        <view class='list borderPad' v-for="(item,index) in userBillList" :key="index">
          <view class='item'>
            <view class='data'>{{ item.month }}</view>
            <view class='listn borRadius14'>
              <view class="itemn" v-for="(vo,indexn) in item.list" :key="indexn">
                <view class='acea-row row-between-wrapper'>
                  <view>
                    <view class='name line1'>{{ vo.balance }}</view>
                    <view>{{ vo.createTime }}</view>
                  </view>
                  <view class='num font_color' v-if="vo.type == 1">+{{ vo.amount }}</view>
                  <view class='num' v-else>-{{ vo.amount }}</view>
                </view>
                <view class="remark">说明：{{ vo.remark }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class='loadingicon acea-row row-center-wrapper'>
          <text class='loading iconfont icon-jiazai'
                :hidden='loading==false'></text>
          {{ userBillList.length > 0 ? loadTitle : '' }}
        </view>
        <view v-if="userBillList.length == 0 && !loading">
          <emptyPage title="暂无账单的记录哦～" :imgSrc="urlDomain+'crmebimage/presets/noJilu.png'"></emptyPage>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getBillList
} from '@/api/user.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import emptyPage from '@/components/emptyPage.vue';

let app = getApp();
export default {
  components: {
    emptyPage
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      loadTitle: '加载更多',
      loading: true,
      loadend: false,
      page: 1,
      limit: 12,
      type: 'all',
      userBillList: [],
      theme: app.globalData.theme,
    };
  },
  computed: mapGetters(['isLogin']),
  onShow() {
    if (this.isLogin) {
      this.getUserBillList();
    } else {
      toLogin();
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.type = options.type;
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getUserBillList();
  },
  methods: {
    /**
     * 获取账户明细
     */
    getUserBillList: function () {
      let that = this;
      if (that.loadend) return;
      that.loading = true;
      that.loadTitle = "";
      let data = {
        page: that.page,
        limit: that.limit,
        type: that.type
      }
      getBillList(data).then(function (res) {
        let list = res.data.list ? res.data.list : [],
            loadend = res.data.totalPage <= that.page;
        for (let i = 0; i < list.length; i++) {
          let time1 = list[i].month;
          let array1 = list[i].list;
          let isEquals = false;
          for (let j = 0; j < that.userBillList.length; j++) {
            let time2 = that.userBillList[j].month;
            let array2 = that.userBillList[j].list;
            if (time1 == time2) {
              array2.push.apply(array2, array1);
              that.userBillList[j].list = array2;
              isEquals = true;
              break;
            }
          }
          if (!isEquals) {
            that.userBillList.push({
              month: time1,
              list: array1
            })
          }
        }
        that.$set(that, 'userBillList', that.userBillList);
        that.page += 1;
        that.loadend = loadend;
        that.loadTitle = loadend ? "哼😕~我也是有底线的~" : "加载更多";
        that.loading = false;
      }, function (res) {
        that.loadTitle = '加载更多';
        that.loading = false;
      });
    },
    /**
     * 切换导航
     */
    changeType: function (type) {
      this.type = type;
      this.loadend = false;
      this.page = 1;
      this.$set(this, 'userBillList', []);
      this.getUserBillList();
    },
  }
}
</script>

<style scoped lang='scss'>
.remark {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.bill-details .nav {
  background-color: #fff;
  height: 90rpx;
  width: 100%;
  line-height: 90rpx;
}

.bill-details .nav .item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #282828;
}

.bill-details .nav .item.on {
  @include main_color(theme);
  @include tab_border_bottom(theme);
}

.font_color {
  color: #8B4513 !important;
}
</style>